<template>
	<div class="layout-pd">
		
		<el-card shadow="hover" header="作业" class="mt15">
			<el-card shadow="hover" header="作业要求" class="mt15">
			<el-row class="mb10" style="color: #808080   ; ">{{ state.tableData.param.homeworkscotent }}</el-row>
		    </el-card> 

			<div class="flex-warp">
				<Auth :value="'btn.add'">
					<div class="flex-warp-item">

						<div class="flex-warp-item-box">
							<el-table :data="state.tableData.data">
								<el-table-column prop="uploadtime" :formatter="getLocalTime" label="提交时间" width="300" />
								<el-table-column prop="name" label="作业命名" width="400" />
								<el-table-column   label="状态" width="300"  show-overflow-tooltip>
									<template #default="scope " >
										<div  v-for="item in state.tableData.param.datas"  >
										<el-tag type="error" v-if="item.id==scope.row.id &&item.state=='打回'"> {{ item.state }}</el-tag>
					                    <el-tag type="success" v-if="item.id==scope.row.id &&item.state=='合格'"> {{ item.state }}</el-tag> 
					                    <el-tag type="success" v-if="item.id==scope.row.id &&item.state=='审核通过'"> {{ item.state }}</el-tag> 
					                    <el-tag type="info"  v-if="item.id==scope.row.id &&item.state=='待审核'"> {{ item.state }}</el-tag> 
					                    <el-tag type="error" v-if="item.id==scope.row.id &&item.state=='审核未通过'"> {{ item.state }}</el-tag> 
				                              </div>
									</template>
								</el-table-column>
								<el-table-column label="操作" width="300">
									<template #default="scope">
										<el-button text type="primary" @click="dowloadfile(scope.row.url)">
											下载</el-button>
											<!-- <input  type="primary" @change="handleFileUpload" /> -->
											<!-- <input type='file' @change="triggerFile($event)" webkitdirectory> -->
											<el-tooltip class="item" effect="dark" content="双击删除"
                                                placement="top-start" >
												<el-button text type="primary" @click="deletescwript(scope.row)">删除</el-button>
                                            </el-tooltip>
									</template>
								</el-table-column>

							</el-table>
						</div>
					</div>
				</Auth>
			</div>

			<Auth :value="'btn.add'">
				<div class="flex-warp-item">
					<div class="flex-warp-item-box">
						<el-upload action="http://localhost:8080/modelfiles/file" :on-success="handleSuccess" :data="uploadForm.data"
							:show-file-list="false" :headers=state.tableData.param.user :limit="3">
							<el-button type="primary">上传</el-button>
						</el-upload>
					</div>
				</div>
			</Auth>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="noPower">
import { Session } from '/@/utils/storage';
import { ref, reactive, } from 'vue'
import { scriptApi } from '/@/api/fun/index'
import { onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import axios from 'axios';




const state = reactive<SysRoleState>({
	tableData: {
		data: [],
		total: 0,
		loading: false,
		param: {
			user: JSON.parse(localStorage.getItem("user") || '{}'),
			homeworkscotent:'',
			file: "",
			name: "",
			images: "",
			search: "",
			pageNum: 1,
			pageSize: 10,
			datas:[]
		},

	},
});


//格式化后端返回来的时间
function getLocalTime(value: any) {
	let time = value.uploadtime[0] + '-' + value.uploadtime[1] + '-' + value.uploadtime[2] + ' ' + value.uploadtime[3] + ':' + value.uploadtime[4] + ':' + value.uploadtime[5]
	return time
}


// function setup() {
//     const triggerFile = (event: Event) => {
//       let file = event.target.files;
//       console.log(file);
//     }

//     return {
//       triggerFile,
//     };
//   },


//页面上获取作业内容
function gethomworks(){
	state.tableData.param.homeworkscotent=Session.get(hid)
	
}
//上传文件的时候传作业hid
const uploadForm = reactive({
    data: {
       hid:JSON.parse(localStorage.getItem('hid') || '{}')
    }
})

//上传文件后获取后端响应的值
const handleSuccess = async (res: any, file: any) => { 
	// action 上传时的回调
	if(res.code==500){
		ElMessage.error(res.msg);
		getAllscript(hid);
	}else{
		state.tableData.data = res.data
	state.tableData.param.datas=res.data;
	ElMessage.success(`上传成功`);
	}
	
};


let hid = JSON.parse(localStorage.getItem('hid') || '{}');
//获取后端所有script的作业
const getAllscript = async (hid: object | undefined) => {
	scriptApi().getAllScrip(hid).then(res => {
		state.tableData.data = res.data;
		state.tableData.param.datas=res.data;
       
	})
}


//删除数据库的文件和oss中的存的文件
const deletescwript = async (row?: any) => {
	scriptApi().deleteUrl(row)
	getAllscript(hid)


}

//下载文件
const dowloadfile = async (url?: any) => {
	window.open(url)
}

const triggerFile = (event?: any) => {
      let file = event.target.files
      console.log(file);
    }



// 	function setup() {
//     const triggerFile = (event:any) => {
//       let file = event.target.files;
//       console.log(file);
//     }

//     return {
//       triggerFile,
//     };
//   }



// const handleFileUpload = async(event?:any)=> {
//       const file = event.target.files[0];
//       const reader = new FileReader();

//       reader.onload = (e) => {
//         // const filePath = e.target.result;
//         // this.sendFilePathToServer(filePath);
//       };

//       reader.readAsText(file);
//     }

//  const  sendFilePathToServer =(filePath?:any)=> {
//       // 在这里，你可以将文件路径发送给服务器
//       // 例如，你可以使用 axios 或者 fetch API
//     },


// const downloadFile = async (url:any, fileName:any)=> {
//       try {
//         const response = await axios.get(url, {
//           responseType: 'blob',
//         });

//         // 创建一个 Blob 对象，用于保存文件内容
//         const blob = new Blob([response.data], { type: response.headers['content-type'] });

//         // 创建一个隐藏的 a 标签，用于触发文件下载
//         const link = document.createElement('a');
//         link.href = URL.createObjectURL(blob);
//         link.download = fileName;
//         link.style.display = 'none';
//         document.body.appendChild(link);
//         link.click();
//         document.body.removeChild(link);
//       } catch (error) {
//         console.error('下载文件失败：', error);
//       }
//     }


//页面加载时去执行
onMounted(() => {
	getAllscript(hid)
	gethomworks()
})
</script>

<style scoped lang="scss">
.flex-warp {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	margin: 0 -5px;

	.flex-warp-item {
		padding: 5px;

		.flex-warp-item-box {
			width: 100%;
			height: 100%;
		}
	}
}

.error {
	height: 100%;

	.error-flex {
		margin: auto;
		display: flex;
		height: 450px;
		width: 1050px;

		.left {
			flex: 1;
			height: 100%;
			align-items: center;
			display: flex;

			.left-item {
				.left-item-animation {
					opacity: 0;
					animation-name: error-num;
					animation-duration: 0.5s;
					animation-fill-mode: forwards;
				}

				.left-item-num {
					color: var(--el-color-info);
					font-size: 55px;
				}

				.left-item-title {
					font-size: 20px;
					color: var(--el-text-color-primary);
					margin: 15px 0 5px 0;
					animation-delay: 0.1s;
				}

				.left-item-msg {
					color: var(--el-text-color-secondary);
					font-size: 12px;
					margin-bottom: 30px;
					animation-delay: 0.2s;
				}

				.left-item-btn {
					animation-delay: 0.2s;
				}
			}
		}

		.right {
			flex: 1;
			opacity: 0;
			animation-name: error-img;
			animation-duration: 2s;
			animation-fill-mode: forwards;

			img {
				width: 100%;
				height: 100%;
			}
		}


	}
}
</style>